iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
自我挑戰組

Unity入門遊戲開發與實作系列 第 27

【Day 27】經典 Flappy Birds 遊戲實作(五)getReady 跟分數的 UI 動畫和遊戲音效

  • 分享至 

  • xImage
  •  

今天,我們要來製作最一開始,的 UI 介面,等待使用者按下空白鍵之後遊戲才正式開始。

製作 getReady 介面

  • 我們要先創立一個 Canvas,存放這些 UI 畫面,在右邊的 UI Scale Mode 設為 Scale With Screen Size ,並把 Match 的滑杆調整為 Match Height
  • 創建一個 Panel ,取名為 getReady ,新增一張半透明黑色圖像,記得要在 Anchor 的地方調整為 Middle Center
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301q3DS5Ry3LX.png
  • 把所有會用到的 UI 都全選起來,修改圖片屬性(Texture type)為 Sprite ( 2D and UI )
  • 依序在 Panel 底下創建不同的圖片,並且調整圖片位置。

https://ithelp.ithome.com.tw/upload/images/20241011/20169301rUxSZ3b9JU.png

製作 score 介面

再建立一個 Panel ,取名為 score。用於在遊戲中顯示玩家的分數。這裡要使用到 TextMeshPro,相比於普通的 Text ,他支持更多元的文字的顯示。

建立 Text Mesh Pro

  • 第一次建立必須要從 Windows -> TextMeshPro -> font asset creator
  • 把想要的字體拉入上面的方框,再把要顯示的自打在下方的方框中
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301qhejvD05J2.png
    點選 generate,再點選 Save,把字體存起來。
  • 創建一個 TextMeahPro,取名為 score ,並且把剛剛生成的字體拉到方框中,調整到適合的位置

https://ithelp.ithome.com.tw/upload/images/20241011/20169301rpRbQkEtjg.png

加分文字變動

當玩家通過一根水管時,上面的 Score 就要加一分。想要達成這個效果,我們要到 GameManager.cs 裡面修改程式碼

// GameManager.cs
// ... //
[SerializeField] private TMP_Text scoreText;

    public void AddScore()
    {
        score++;
        scoreText.text = score.ToString();
    }

宣告了一個 TMP_Text 的物件,並且在每次加分的時候,使用 ToString() 函式來把一個 int 轉為 String 顯示在畫面中。
這樣當玩家通過水管的時候,上面的分數也會跟著增加囉
https://ithelp.ithome.com.tw/upload/images/20241011/20169301hl6VPb8MNL.png

製作 UI 動畫

當玩家按下空白鍵開始遊戲時,GetReady 的 Panel 就會消失,所以我們一樣要創建一個 Animator ControllerAnimation
https://ithelp.ithome.com.tw/upload/images/20241011/20169301PKG4ENY4TN.png


因為是使用者點選之後才開始動畫,所以先創建一個 Empty State , 並設置一個布林值 gameStart 來控制消失的動畫是否播放

  • Animation 中點選 Add Property ,這裡有需多不同的屬性可以調整,我們著重調整 Anchors Positionalpha 的部分
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301vCf8SARUK4.png

如果想要調整透明度,要先給該物件加上 Canvas Group 的 Component 才有選項可以調整

  • 每次新增或是改動關鍵幀都要到 Inspector 面板中右鍵點選改動的部分,選擇 Update Key
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301zNelBj3hYh.png
    調整完後就有淡出的動畫效果囉
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301581hTV6y0i.png
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301SqxtuvPBLU.png
    https://ithelp.ithome.com.tw/upload/images/20241011/20169301jx6XPfo4X2.png

我們給這個動畫一個 gameStart 的布林值來決定是否撥放動畫,所以我們還要創建一個小小的腳本,取名為 getReady.cs

// getReady.cs
using UnityEngine;
public class getReady : MonoBehaviour
{
    [SerializeField] private Animator getreadyAnimator;

    void Update()
    {
        if(FindObjectOfType<GameManager>().gameIsStart)
        {
            getreadyAnimator.SetBool("gameStart", true);
        }
    }
}

腳本就是簡單判斷遊戲是否開始,當玩家按下第一次空白鍵的時候,在 Bird.cs 裡面就會設置 GameManager.cs 裡的 gameIsStarttrue,也就會播放淡出動畫。同時以要在其他物件裡面加入這個判定,當遊戲開始時,地板和水管才會開始向前。

製作音效

我們要在小鳥通過水管和遊戲結束的時候撥放音效,因此我們要在 Bird.cs 中新增一些變數

// Bird.cs
    [SerializeField] private AudioSource audioSource;

    [SerializeField] private AudioClip addSound;

    [SerializeField] private AudioClip crashSound;

並且在 OnCollisionEnterOnTriggerEnter 中分別寫上

// Bird.cs
    private void OnTriggerEnter(Collider colliderInfo)
    {
        if(colliderInfo.CompareTag("Tube"))
        {
            // ... //
            audioSource.PlayOneShot(addSound);
    // ... //
private void OnCollisionEnter(Collision colliderInfo)
{
	audioSource.PlayOneShot(crashSound);
    // ... //    

並回到 Unity 把音效和音效控制器拉給 Bird
https://ithelp.ithome.com.tw/upload/images/20241011/20169301SqHbanCGAr.png
這樣我們就完成了簡單的音效囉!
今天,我們完成了開始介面,並等待玩家按下第一次空白鍵之後遊戲正式開始,做了精緻的動畫過度,用 GameManager 來控制文字加分,還添加了加分音效和失敗音效。明天,要來處理最高紀錄的儲存,還有遊戲結束的 End Game UI 介面!


上一篇
【Day 26】經典 Flappy Birds 遊戲實作(四)計分和 GameOver 機制
下一篇
【Day 28】經典 Flappy Birds 遊戲實作(六)GameOver UI 和存檔系統
系列文
Unity入門遊戲開發與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言